
<h3 mat-dialog-title class="mb-3">Request</h3>

<form (ngSubmit)="save()">
  <div mat-dialog-content>

    <mat-form-field class="w-100 standalone-field">
      <span
        matPrefix
        matTooltip="Prompt"
        class="d-flex flex-nowrap align-items-center justify-content-between me-2">
        <mat-icon>help_outline</mat-icon>
        <span class="text-muted">|</span>
      </span>
      <input
        matInput
        cdkFocusInitial
        placeholder="Prompt"
        [(ngModel)]="data.prompt"
        name="prompt"
        autocomplete="off">
    </mat-form-field>

    <!-- CodeMirror editor in case data is code -->
    <div class="col-12" *ngIf="ready">

      <app-codemirror-hyperlambda
        [(model)]="model">
      </app-codemirror-hyperlambda>

    </div>

    <!-- Any other types of content besides code -->
    <div class="col-12 mb-0" *ngIf="!ready && !preview">

      <mat-form-field class="w-100 custom-alignment">
        <span
          matPrefix
          matTooltip="Completion for prompt"
          class="d-flex flex-nowrap align-items-center justify-content-between me-2">
          <mat-icon>featured_play_list</mat-icon>
          <span class="text-muted">|</span>
        </span>
        <textarea
          matInput
          name="txt_completion"
          placeholder="Completion"
          [(ngModel)]="data.completion"
          rows="18">
        </textarea>
      </mat-form-field>

    </div>

    <!-- Preview of text content transformed as Markdown instead of textarea -->
    <div class="col-12 mb-2 mt-2" *ngIf="!ready && preview">

      <mat-card class="markdown-preview" [innerHTML]="data.completion | marked"></mat-card>

    </div>

  </div>

  <div mat-dialog-actions [align]="'end'">

    <mat-slide-toggle
      labelPosition="before"
      class="me-2"
      name="preview"
      (change)="previewChanged()"
      [(ngModel)]="preview">
      Preview
    </mat-slide-toggle>

    <mat-checkbox
      [(ngModel)]="data.cached"
      name="cached"
      class="me-3"
      labelPosition="before"
      color="primary">
      Cache
    </mat-checkbox>

    <mat-checkbox
      [(ngModel)]="train"
      name="train"
      class="me-3"
      labelPosition="before"
      color="primary">
      Train
    </mat-checkbox>

    <button
      mat-button
      mat-dialog-close>
      Cancel
    </button>

    <button
      mat-flat-button
      type="submit">
      Save
    </button>

  </div>

</form>
